<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑块选择颜色</title>
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css"/>
	<style>
		#red .ui-slider-range { background: #ef2929; }
  		#red .ui-slider-handle { border-color: #ef2929; }
  		#green .ui-slider-range { background: #8ae234; }
		#green .ui-slider-handle { border-color: #8ae234; }
		#blue .ui-slider-range { background: #729fcf; }
		#blue .ui-slider-handle { border-color: #729fcf; }
		#color-sel{
			width: 500px;
			float: left;
		}
		#red,#green,#blue{
			width: 80%;
			margin: 15px;	
		}
		#red .ui-state-active{
			background-color: #ef2929;
		}
		#green .ui-state-active{
			background-color: #8ae234;
		}
		#blue .ui-state-active{
			background-color:  #729fcf;
		}
		#color-board{
			width: 100px;
			height: 100px;
			border: 1px solid gray;
			float: left;
			resize:both;
			overflow: auto;
		}
		#list{
			list-style: none;
			padding: 0;
		}

	</style>
	</head>
	<body>
		<!--
			------------------------ 颜色选择----------------------
		-->
		<div id="color-sel">
			<div id="red"></div>
			<div id="green"></div>
			<div id="blue"></div>
		</div>
		<div id="color-board"></div>
		<div style="clear: both;"></div>
		<hr />
		<!--
			--------------------------动画对话框----------------------
		-->
		
		<button id="btn">弹出对话框</button>
		<div id="dialog">
			<p>这是一个对话框</p>
		</div>
		<!--
			----------------日期---------------------
		-->
		<input type="date" />
		<br />
		<hr />
		<input type="text" id="date" />
		<!--
			------------------排序--------------------
		-->
		<ul id="list">
			<li class="ui-state-default">00000000000001</li>
			<li class="ui-state-default">00000000000002</li>
			<li class="ui-state-default">00000000000003</li>
			<li class="ui-state-default">00000000000004</li>
			<li class="ui-state-default">00000000000005</li>
		</ul>
		<!--
			------------------inline-block-------------------------
		-->
		<input /> 
		<input type="submit" />
		<hr />
		<div class="space">
		    <a href="#">惆怅</a>
		    <a href="#">淡定</a>
		    <a href="#">热血</a>
		</div>
		
		<script src="jquery-ui/jquery.js"></script>
		<script src="jquery-ui/jquery-ui.js"></script>
		<script type="text/javascript">
			//------------------colorpicker-----------------------------
			$('#red,#green,#blue').slider({
				orientation:'horizontal',
				range:'min',
				max:255,
				value:127,
				slide:colorChange
			})
			$('#red').slider('value',10)
			function colorChange(){
				var r = $('#red').slider('value')
				var g = $('#green').slider('value')
				var b = $('#blue').slider('value')
				$('#color-board').css('background-color','rgb('+r+','+g+','+b+')')
			}
			//---------------------dialog/button/effect-------------------------
			$('#btn').button()
			$('#dialog').dialog({
				autoOpen:false,
				show: {
			        effect: "blind",
			        duration: 1000
			      },
			    hide: {
			        effect: "explode",
			        duration: 1000
			    }
			})
			$('#btn').click(function(){
				$('#dialog').dialog('open')
			})
			//-----------------datepicker/dateFormat--------------------------
			$('#date').datepicker({
				showAnim:'fadeIn',
				dateFormat:'yy-mm-dd'
			})
			//----------------------sortable--------------------------------
			$('#list').sortable()
		</script>
	</body>
</html>
